<template>
    <div>
        <van-nav-bar
                title="订单列表"
                left-text="返回"
                right-text="添加"
                @click-right="addOrder"
                left-arrow
                @click-left="onBack"
        />
        <form action="/">
            <van-search
                    v-model="keyword"
                    placeholder="请输入搜索关键词"
                    show-action
                    @search="onSearch"
            />
        </form>
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
        >
            <van-cell-group
                    :title="item.khmc"
                    v-for="item in list"
                    :key="item.DjLsh">
                    <van-cell :title="item.khmc" :value="item.xdrq" @click="itemShowHide(item)" is-link arrow-direction="down"/>
                <template v-if="item.show">
                    <van-cell title="产品编号" value="修改密码" />
                    <van-cell title="产品描述" value="修改密码" />
                    <van-cell title="转换系数" value="修改密码" />
                    <van-cell title="计量单位" value="修改密码" />
                    <van-cell title="销售数量" value="修改密码" />
                    <van-cell title="销售单价" value="修改密码" />
                    <van-cell title="辅助数量" value="修改密码" />
                    <van-cell title="金额" value="修改密码" />
                    <van-cell title="余数" value="修改密码" />
                    <van-cell title="库存数量" value="修改密码" />
                    <van-cell title="库存箱数" value="修改密码" />
                </template>
            </van-cell-group>
        </van-list>
    </div>
</template>
<script>
  import { orderList } from '@/api'
  import { Field, Button, Cell, CellGroup, List, Search, NavBar } from 'vant'

  export default {
    components: {
      [Field.name]: Field,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [List.name]: List,
      [Search.name]: Search,
      [NavBar.name]: NavBar,
      [Button.name]: Button
    },
    data () {
      return {
        list: [],
        loading: false,
        finished: false,
        keyword: '',
        page: 1
      }
    },
    methods: {
      onSearch () {
        this.list = []
        this.page = 1
        this.onLoad()
      },
      onLoad () {
        // this.loading = true
        let data = {page: this.page, keyword: this.keyword}
        orderList(data).then((res) => {
          console.log(res)
          this.page ++
          for (let i in res.data) {
            res.data[i].show = false
            this.list.push(res.data[i])
          }
          // 数据全部加载完成
          if (res.data.length <= 0) {
            this.finished = true
          }

          // 加载状态结束
          this.loading = false
        })
      },
      onBack () {
        this.$router.back()
      },
      addOrder () {
        this.$router.push({path: 'order-add'})
      },
      itemShowHide (item) {
        item.show = !!item.show
      }
    }
  }
</script>
